<!--
设备概览页面
-->
<template>
  <rj-modal
    :visible="isVisible"
    width="680px"
    @cancel="closeModal"
    @ok="submitTotalForm"
    :title="title"
  >
    <a-form-model
      ref="globalForm"
      style="padding: 16px"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formData"
      :rules="rules"
      class="own-form"
    >
      <a-form-model-item :label="$t('exportPdf.uniqueIdentify')" prop="sn">
        <a-input
          v-model="formData.sn"
          :maxLength="32"
          :disabled="oldData && oldData.id && oldData.id != ''"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('exportPdf.deviceSno')"
        prop="productClass"
        class="own-item"
      >
        <a-input
          v-model="formData.productClass"
          :maxLength="32"
          :disabled="oldData && oldData.id && oldData.id != ''"
        />
      </a-form-model-item>
      <a-form-model-item :label="$t('exportPdf.deviceName')" prop="aliasName">
        <a-tooltip placement="topLeft">
          <template #title>
            <span> {{ $t('exportPdf.inputTip') }} </span>
          </template>

          <a-input v-model="formData.aliasName" :maxLength="32"></a-input>
        </a-tooltip>
      </a-form-model-item>
      <a-form-model-item :label="$t('exportPdf.maccAddr1')" prop="mac">
        <a-input v-model="formData.mac" :maxLength="32" />
      </a-form-model-item>
      <a-form-model-item :label="$t('exportPdf.ipAddr1')" prop="localIp">
        <a-input v-model="formData.localIp" :maxLength="32" />
      </a-form-model-item>
      <a-form-model-item :label="$t('exportPdf.webAccount1')" prop="webName">
        <a-input v-model="formData.webName" />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('exportPdf.webPassword')"
        prop="webPassword"
      >
        <a-input v-model="formData.webPassword" />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('exportPdf.telnetAccount1')"
        prop="telnetName"
      >
        <a-input v-model="formData.telnetName" />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('exportPdf.telnetPassword1')"
        prop="telnetPassword"
      >
        <a-input v-model="formData.telnetPassword" />
      </a-form-model-item>
    </a-form-model>
  </rj-modal>
</template>
<script>
import { mapState } from 'vuex';
import { requestHttp, ValiDateTools, maccApi } from '@utils/index';
import { RjModal } from '@components';
import { i18nRender } from '@/locales';
export default {
  name: 'deviceDetaillWin',
  props: {
    oldData: Object,
  },
  components: {
    'rj-modal': RjModal,
  },
  data() {
    let validateProductClass = function (rule, value, callback) {
      if (value === null || value === undefined || value === '') {
        return callback(new Error(i18nRender('exportPdf.uniqueIdentify1')));
      }
      if (value.length > 32) {
        return callback(new Error(i18nRender('exportPdf.maxLength32')));
      }
      callback();
    };
    let validatesn = function (rule, value, callback) {
      if (value === null || value === undefined || value === '') {
        return callback(new Error(i18nRender('exportPdf.deviceSNNoNull')));
      }
      if (value.length > 32) {
        return callback(new Error(i18nRender('exportPdf.maxLength32')));
      }
      callback();
    };
    let validateNamePass = function (rule, value, callback) {
      if (value.indexOf('/') != -1) {
        return callback(new Error(i18nRender('exportPdf.tips2')));
      }
      if (/[\u4E00-\u9FA5?]/.test(value)) {
        return callback(new Error(i18nRender('exportPdf.tips3')));
      }
      if (value.length > 64) {
        return callback(new Error(i18nRender('exportPdf.maxLength64')));
      }
      callback();
    };

    let validateMac = function (rule, value, callback) {
      if (value) {
        const result = ValiDateTools.checkMac(value);
        if (!result.result) {
          return callback(new Error(result.msg));
        } else {
          callback();
        }
      }
      callback();
    };
    let validateIP = function (rule, value, callback) {
      if (value) {
        const result = ValiDateTools.checkIp(value);
        if (!result.result) {
          return callback(new Error(result.msg));
        } else {
          callback();
        }
      }
      callback();
    };
    return {
      formData: {
        productClass: '',
        productType: '',
        sn: '',
        aliasName: '',
        mac: '',
        localIp: '',
        webName: '',
        webPassword: '',
        telnetName: '',
        telnetPassword: '',
      },
      labelCol: { span: 10 },
      wrapperCol: { span: 11 },
      otherType: '',
      selectList: [
        this.$t('exportPdf.switch'),
        this.$t('exportPdf.gateway'),
        'AC',
        this.$t('exportPdf.firewall'),
        this.$t('exportPdf.wirelessAP'),
        this.$t('exportPdf.reyeeNetworkAP'),
        this.$t('exportPdf.custom'),
      ],
      rules: {
        sn: [
          {
            required: true,
            message: this.$t('exportPdf.maxLength32'),
            validator: validatesn,
            trigger: 'blur',
          },
        ],
        productClass: [
          {
            required: true,
            validator: validateProductClass,
            message: this.$t('exportPdf.maxLength32'),
            trigger: 'blur',
          },
        ],
        webName: [
          {
            validator: validateNamePass,
            trigger: 'blur',
          },
        ],
        webPassword: [
          {
            validator: validateNamePass,
            trigger: 'blur',
          },
        ],
        telnetName: [
          {
            validator: validateNamePass,
            trigger: 'blur',
          },
        ],
        telnetPassword: [
          {
            validator: validateNamePass,
            trigger: 'blur',
          },
        ],
        mac: [
          {
            validator: validateMac,
            trigger: 'blur',
          },
        ],
        localIp: [
          {
            validator: validateIP,
            trigger: 'blur',
          },
        ],
      },
      isVisible: false,
      title: '',
    };
  },
  mounted() {},
  created() {
    this.initView();
  },
  methods: {
    initView() {
      if (this.oldData && this.oldData.id) {
        this.title = this.$t('exportPdf.editDeviceDetail');
        this.formData = Object.assign(this.oldData);
      } else {
        this.title = this.$t('exportPdf.addDeviceDetail');
        this.formData = {
          productClass: '',
          productType: this.$t('exportPdf.switch'),
          sn: '',
          aliasName: '',
          mac: '',
          localIp: '',
          webName: '',
          webPassword: '',
          telnetName: '',
          telnetPassword: '',
        };
      }
    },

    showModal() {
      this.isVisible = true;
    },
    closeModal() {
      this.$refs.globalForm.resetFields();
      this.isVisible = false;
    },
    validateType(rule, value, callback) {
      let val = this.otherType;
      if (this.formData.productType == this.$t('exportPdf.custom')) {
        if (val === null || val === undefined || val === '') {
          return callback(new Error(i18nRender('exportPdf.require')));
        } else {
          const results = ValiDateTools.checkAliasName(val, 32);
          if (results.result) {
            callback();
          } else {
            callback(results.msg);
          }
        }
      }
      return callback();
    },
    handleChange() {},
    submitTotalForm() {
      this.$refs.globalForm.validate((valid) => {
        if (valid) {
          this.setDeviceDetail();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    setDeviceDetail() {
      let params = {
        ...this.formData,
        groupId: this.groupId,
      };
      if (this.formData.productType == this.$t('exportPdf.custom')) {
        params.productType = this.otherType;
      }
      let api = maccApi.DELIVERY_DEVICE_DETAILS_ADD;
      let method = 'POST';
      if (this.oldData && this.oldData.id) {
        api = maccApi.DELIVERY_DEVICE_DETAILS_UPDATE;
        params.id = this.oldData.id;
        method = 'PUT';
      }
      requestHttp({
        api: api,
        method: method,
        params: params,
      }).then((ret) => {
        if (ret.code == 0) {
          this.$emit('refreshTable');
          this.closeModal();
        } else {
          this.$message.error(ret.msg);
        }
      });
    },
  },
  watch: {
    oldData() {
      this.initView();
    },
  },
  computed: {
    ...mapState('Group', ['groupId']),
  },
};
</script>
<style lang="less" scoped>
.own-form .ant-form-item {
  margin-bottom: 8px;
}
</style>
